<template>
  <div id="panel" ref="panelRef">
    <header class="panel-header" ref="panelHeaderRef" v-if="header" :style="headerStyle">
      <slot name="header">
        <div class="header-left">{{ title }}</div>
        <div style="float: right">
          <span v-if="isFull" @click="handleIconClick" class="icon-hover"><svg-icon icon-class="narrow" /></span>
          <span v-else @click="handleIconClick" class="icon-hover"><svg-icon icon-class="full"
              class="full-icon" /></span>
          <span @click="handleClose" class="icon-hover"><svg-icon icon-class="close" /></span>
        </div>
      </slot>
    </header>

    <main class="panel-main" ref="panelMainRef" @click="changeZindex" :style="mainStyle">
      <slot name="main"></slot>
    </main>
  </div>
</template>

<script>
import cache from "@/plugins/cache";
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue'
import Folder from "@/components/Folder/Folder.vue";
import File from "@/components/File/File.vue";

export default {
  name: "Panel",
  components: { Folder, File, SvgIcon },

  props: {
    title: {
      default: "Title",
      type: String,
      required: false,
    },

    transparent: {
      default: false,
      type: Boolean,
      required: false,
    },

    transValue: {
      default: 0.5,
      type: Number,
      required: false,
    },

    header: {
      default: true,
      type: Boolean,
      required: false,
    },

    width: {
      default: 700,
      type: Number,
      required: false,
    },

    height: {
      default: 400,
      type: Number,
      required: false,
    },

    headerStyle: {
      default: {},
      type: Object,
      required: false,
    },

    mainStyle: {
      default: {},
      type: Object,
      required: false,
    }
  },

  data() {
    return {
      isFull: false,
    }
  },

  mounted() {
    // 网页内容不可选中
    document.onselectstart = function () {
      return false
    }

    this.initZindex()
    this.handleDivDrag()

    let panel = this.$refs.panelRef

    if (this.transparent) {
      panel.style.backgroundColor = 'rgba(255,255,255,' + this.transValue + ')'
    }

    panel.style.width = this.width + 'px'
    panel.style.height = this.height + 'px'
    panel.style.trans

  },

  methods: {
    handleIconClick() {
      let panel = this.$refs.panelRef
      if (!this.isFull) {
        panel.style.width = '100%'
        panel.style.height = '100vh'
        panel.style.left = '0'
        panel.style.top = '0'
        this.isFull = true
        // this.$refs.panelHeaderRef.removeEventListener('mousedown')
      } else {
        panel.style.width = '600px'
        panel.style.height = '300px'
        panel.style.left = '100px'
        panel.style.top = '100px'
        this.isFull = false
      }
    },

    handleClose() {
      let panel = this.$refs.panelRef
      panel.style.display = 'none'
    },

    initZindex() {
      var zIndex = cache.local.get('zIndex');
      if (zIndex == null) {
        cache.local.set('zIndex', 1)
      }
    },

    changeZindex() {
      let panel = this.$refs.panelRef
      var zIndex = cache.local.get('zIndex');
      zIndex++;
      cache.local.set('zIndex', zIndex)
      panel.style.zIndex = zIndex
    },

    handleDivDrag() {
      let panel = this.$refs.panelRef
      let panelHeader = this.$refs.panelHeaderRef
      let width = this.width
      let height = this.height

      panelHeader.addEventListener('mousedown', function (e) {
        var zIndex = cache.local.get('zIndex');
        zIndex++;
        cache.local.set('zIndex', zIndex)

        panel.style.zIndex = zIndex
        let x = e.pageX - panel.offsetLeft
        let y = e.pageY - panel.offsetTop

        document.addEventListener('mousemove', move)

        function move(e) {
          let tmpX = e.pageX - x
          let tmpY = e.pageY - y

          if (tmpX <= 0) {
            tmpX = 0
          }

          if (tmpY <= 0) {
            tmpY = 0
          }

          if (window.innerWidth - tmpX <= width) {
            tmpX = window.innerWidth - width
          }
          if (window.innerHeight - tmpY <= height) {
            tmpY = window.innerHeight - height
          }

          panel.style.left = tmpX + 'px'
          panel.style.top = tmpY + 'px'
        }

        document.addEventListener('mouseup', function (e) {
          document.removeEventListener('mousemove', move)
        })
      })
    },


  }
}
</script>

<style scoped lang="scss">
#panel {
  position: absolute;
  left: 100px;
  top: 100px;
}

.panel-header {
  line-height: 30px;
  font-weight: bold;
  background-color: #caccd1;
  height: 30px;
  overflow: hidden;

  &:hover {
    cursor: move;
  }

  span {
    padding: 10px;

    &:hover {
      background-color: #caccd1;
    }
  }
}

.header-left {
  float: left;
  padding: 0 10px;

  &:hover {
    cursor: default;
  }
}

.full-icon {
  width: 18px;
  height: 18px;
}

.icon-hover {
  &:hover {
    cursor: default;
  }
}

.panel-main {
  height: calc(100% - 30px);
  width: auto;
  background-color: #f3f4f7;
}
</style>